<template>
	<view>
		<navbar :title="title" />
		<serviceVue :more="false" :title="title" :list="spuData.list" />
		<u-gap height="110rpx"></u-gap>
		<tabbar :current="0" />
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import tabbar from "@/components/tabbar.vue"
	import serviceVue from "../components/service.vue";
	import SpuApi from "@/sheep/api/product/spu.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"

	onReachBottom(() => {
		if (spuData.list.length >= spuData.total) return;
		spuParams.pageNo++;
		spuPage()
	})

	const spuData = reactive({
		list: [],
		total: 0
	})

	const spuParams = reactive({
		pageNo: 1,
		pageSize: 10,
		categoryId: null,
	})

	const spuPage = () => {
		SpuApi.getSpuPage(spuParams).then(res => {
			spuData.total = res.data.total;
			if (spuParams.pageNo === 1) spuData.list = res.data.list
			else spuData.list = spuData.list.concat(res.data.list)
		})
	}

	const title = ref("");
	onLoad((options) => {
		spuParams.categoryId = options.id
		title.value = options.name
		spuPage()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
</style>